<template>
    <div class="snowContent" @click="go3D">
        <div class="snow">
            <img src="../../assets/img/snow.png" v-for="(item, index) in props.snows" :key="index" ref="itemRefs">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineEmits, onBeforeUnmount, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useSettingStore from '@/store/modules/setting'

const settings = useSettingStore()

const props = defineProps({
    snows: {
        type: Number,
        default: 50
    },
})

const route = useRoute()
const router = useRouter()

const emit = defineEmits(['go3D'])

const videoPlayer = ref<any>(null);
const itemRefs = ref<any>([])

const go3D = () => {
    emit('go3D')
}

const first = () => {
    itemRefs.value.forEach(el => {
        console.log(el); // 每个元素的原生 DOM 引用
        el.style.left = `${Math.random() * 100}%`; // 设置花朵初始位置
        el.style.top = `${Math.random() * 100}%`; // 设置花朵初始位置
        el.style.transform = `rotate(${Math.random() * 100}deg);`
    });
}


onMounted(() => {
    // settings.handlerHeaderShow(false)
    nextTick(() => {
        first()
    })
})

onBeforeUnmount(() => {
    // settings.handlerHeaderShow(true)
})

</script>


<style lang="scss" scoped>
.snowContent {
    width: 100%;
    height: 100%;
    // overflow: hidden;
    position: absolute;
    background: transparent;
    z-index: -10;
    // background-color: #000;
    /* 雪花动画效果 */
    .snow {
        position: absolute; /* 设置花朵绝对定位 */
        width: 100%; /* 宽度100% */
        height: 100%; /* 高度100vh */
        // z-index: 9; /* 设置层级 */
        // pointer-events: none; /* 禁止鼠标事件 */
    }
    /* 花朵动画关键帧 */
    @keyframes animate {
        0% {
            opacity: 0;
            top: -10px;
            transform: translateX(20px) rotate(0deg);
        }
        /* 其他关键帧省略，实现花朵飘落效果 */
    }
    /* 不同花朵的位置和动画速度 */
    .snow img {
        width: 45px;
        height: 45px;
        position: absolute; /* 设置花朵图片绝对定位 */
        animation: animate 20s linear infinite;
    }
}
</style>